<template> 
	<view>
		<u-gap height="20" bg-color="#f5f5f5"></u-gap>
		<view class="class_box">
			<view class="title">今日指导价</view>
		</view>
		<u-cell-group>
			<!-- 使用 v-for 动态渲染价格信息 -->
		
			<u-cell v-for="(item, index) in pricingList" :key="index" 
				:title="item.title" 
				:label="item.description" 
				:value="item.price_unit" 
				:title-style="{color:'#000000',fontSize:'32rpx'}"
				:value-style="{color:'#009920',fontSize:'32rpx'}">
			</u-cell>
		</u-cell-group>
	</view>
</template>

<script>
import axios from 'axios'; // 引入 axios

export default {
	data() {
		return {
			// 定义价格列表
			pricingList: [{
						title: "黄纸",
						description: "纯色纸箱,如家电包装箱",
						price_unit: "1元/公斤"
					},
					{
						title: "统纸",
						description: "黄纸和花纸混合",
						price_unit: "1元/公斤"
					}],
		};
	},
	mounted() {
		this.fetchPricingData(); // 组件加载后获取数据
	},
	methods: {
		async fetchPricingData() {
			try {
				const response = await axios.get('http://localhost:8088/api/greenbin/Index/GetCategoryPrice'); // 替换为你的 API 地址
				
				this.pricingList = response.data.data; // 假设 API 返回的数据格式为 [{title: ..., label: ..., value: ...}, ...]
			     
				// console.log(this.pricingList)
			
			} catch (error) {
				console.error('获取价格数据失败:', error);
				// 可以在这里添加错误处理逻辑，比如设置默认数据或展示错误信息
			}
		},
	},
};
</script>

<style scoped>
/* 添加你的自定义样式 */
.class_box {
    padding: 20rpx;
}
.title {
    font-size: 32rpx;
    font-weight: bold;
    color: #000000;
}
</style>